import { Avatar, Dropdown, Space } from 'antd';
import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
import { useAuthStore } from '~/stores/auth';
import { useNavigate } from '@remix-run/react';

export function Header() {
    const user = useAuthStore((state) => state.user);
    const logout = useAuthStore((state) => state.logout);
    const navigate = useNavigate();

    const handleMenuClick = ({ key }: { key: string }) => {
        switch (key) {
            case 'profile':
                navigate('/profile');
                break;
            case 'logout':
                logout();
                navigate('/auth/login', { replace: true });
                break;
        }
    };

    const items: any = [
        {
            key: 'profile',
            label: '个人中心',
            icon: <UserOutlined />,
        },
        {
            type: 'divider',
        },
        {
            key: 'logout',
            label: '退出登录',
            icon: <LogoutOutlined />,
        },
    ];

    return (
        <header className="bg-white shadow px-6 py-4 flex items-center justify-between">
            <div className="text-xl font-bold">ASAP CMS</div>
            <Dropdown
                menu={{
                    items,
                    onClick: handleMenuClick
                }}
                placement="bottomRight"
            >
                <Space className="cursor-pointer">
                    <Avatar icon={<UserOutlined />} />
                    <span>{user?.username}</span>
                </Space>
            </Dropdown>
        </header>
    );
}